<template>

  <el-main>
    <!-- 编码标题 -->
    <!--    <el-row style="height: 28px;  line-height: 24px;margin-bottom: 0px">-->
    <!--      <span class="fund-title">{{ codeNumber }}</span>-->
    <!--    </el-row>-->

    <el-row :gutter="10" style="margin-bottom: 10px;">
      <el-col :span="9">

        <!-- 基金信息模块 -->
        <el-card>
          <fund-info-item :code-number="codeNumber" />
        </el-card>

        <!-- 实时净值模块 -->
        <el-card style="margin-top: 10px">
          <estimated-map :code-number="codeNumber" />
        </el-card>

        <!-- 基金持仓模块 -->
        <position style="margin-top: 10px" :code-number="codeNumber" />

        <!-- 基金其他模块 -->
        <el-tabs
          v-model="activeTab3"
          type="border-card"
          style="width: 100%;margin-top: 10px;margin-bottom: 0;"
          @tab-click="handleTabClick"
        >
          <el-tab-pane label="规模变动" name="dataFluctuationScale">
            <data-fluctuation-scale
              v-if="activeTab3==='dataFluctuationScale'"
              style="height: 500px"
              :code-number="codeNumber"
            />
          </el-tab-pane>
          <el-tab-pane label="持有人结构" name="dataHolderStructure">
            <data-holder-structure
              v-if="activeTab3==='dataHolderStructure'"
              style="height: 500px"
              :code-number="codeNumber"
            />
          </el-tab-pane>
          <el-tab-pane label="资产配置" name="dataAssetAllocation">
            <data-asset-allocation
              v-if="activeTab3==='dataAssetAllocation'"
              style="height: 500px"
              :code-number="codeNumber"
            />
          </el-tab-pane>
          <el-tab-pane label="业绩评价" name="dataPerformanceEvaluation">
            <data-performance-evaluation
              v-if="activeTab3==='dataPerformanceEvaluation'"
              style="height: 500px"
              :code-number="codeNumber"
            />
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="15">
        <!-- 基金经理模块 -->
        <fund-manager :code-number="codeNumber" />

        <el-row :gutter="10" style="margin-top: 10px;margin-bottom: 10px">
          <el-col :span="14">
            <!--          <el-card style="width: 100%">-->
            <el-tabs
              v-model="activeTab"
              type="border-card"
              style="width: 100%;margin-bottom: 0;"
              @tab-click="handleTabClick"
            >
              <!-- 单位净值图 -->
              <!--            <nav-map :code-number="codeNumber" />-->
              <el-tab-pane label="单位净值走势" name="dataNetWorthTrendData">
                <data-net-worth-trend
                  v-if="activeTab==='dataNetWorthTrendData'"
                  :code-number="codeNumber"
                  :data-a-c-and-net-worth="dataACAndNetWorth"
                  @getDataNetWorthTrendData="getDataNetWorthTrendData"
                />
              </el-tab-pane>
              <!-- 单位净值图 -->
              <!--            <nav-map :code-number="codeNumber" />-->
              <el-tab-pane label="累计净值走势" name="dataAcWorthTrendData" style="width: 100%">
                <data-a-c-worth-trend
                  v-if="activeTab==='dataAcWorthTrendData'"
                  ref="dataAcWorthTrendDataRef"
                  :code-number="codeNumber"
                  @getDataAcWorthTrendData="getDataAcWorthTrendData"
                />
              </el-tab-pane>
            </el-tabs>

            <!--          </el-card>-->
          </el-col>

          <!--          <el-col :span="10" :xs="10" :sm="10" :md="10" :lg="10" :xl="10">-->
          <el-col :span="10">
            <el-card style="width: 100%">
              <!-- 净值表格数据 -->
              <nav-table :code-number="codeNumber" style="width: 100%;height: 480px" />
            </el-card>
          </el-col>
          <el-col :span="1">
            <!--          <el-card>-->
            <!--            XXX-->
            <!--          </el-card>-->
          </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-bottom: 10px">
          <!-- 累计净值走势 -->
          <el-col :span="24">
            <el-tabs
              v-model="activeTab1"
              type="border-card"
              style="width: 100%;margin-top: 0;margin-bottom: 0;"
              @tab-click="handleTabClick"
            >
              <el-tab-pane label="累计收益率走势" name="dataGrandTotal">
                <data-grand-total style="height: 360px" :code-number="codeNumber" />
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-bottom: 10px">
          <el-col :span="24">
            <el-tabs
              v-model="activeTab2"
              type="border-card"
              style="width: 100%;margin-top: 0;margin-bottom: 0;"
              @tab-click="handleTabClick"
            >
              <el-tab-pane label="同类排名走势" name="dataRateInSimilarType">
                <data-rate-in-similar-type
                  v-if="activeTab2==='dataRateInSimilarType'"
                  style="height: 350px"
                  :code-number="codeNumber"
                />
              </el-tab-pane>
              <el-tab-pane label="百分比排名走势" name="dataRateInSimilarPersent">
                <data-rate-in-similar-persent
                  v-if="activeTab2==='dataRateInSimilarPersent'"
                  style="height: 350px"
                  :code-number="codeNumber"
                />
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="10" />
    </el-row>

  </el-main>
</template>

<script>
import FundInfoItem from '@/views/front/detail/components/info/FundInfoItem'
import FundManager from '@/views/front/detail/components/manager/FundManager'
import EstimatedMap from '@/views/front/detail/components/estimate/EstimatedMap'
import Position from '@/views/front/detail/components/position'
// import NavMap from '@/views/front/detail/components/nav/NavMap'
import NavTable from '@/views/front/detail/components/nav/NavTable'
import DataNetWorthTrend from '@/views/front/detail/components/nav/DataNetWorthTrend'
import DataACWorthTrend from '@/views/front/detail/components/nav/DataACWorthTrend'

import DataGrandTotal from '@/views/front/detail/components/grandTotal/DataGrandTotal'
import DataRateInSimilarType from '@/views/front/detail/components/rate/DataRateInSimilarType'
import DataRateInSimilarPersent from '@/views/front/detail/components/rate/DataRateInSimilarPersent'
import DataHolderStructure from '@/views/front/detail/components/holderStructure/DataHolderStructure'
import DataFluctuationScale from '@/views/front/detail/components/holderStructure/DataFluctuationScale'
import DataAssetAllocation from '@/views/front/detail/components/holderStructure/DataAssetAllocation'
import DataPerformanceEvaluation from '@/views/front/detail/components/holderStructure/DataPerformanceEvaluation'

import { queryDataACAndNetWorth } from '@/api/front/fund/fundDataContent'

export default {
  name: 'Detail',
  components: {
    DataPerformanceEvaluation,
    DataAssetAllocation,
    DataFluctuationScale,
    DataHolderStructure,
    DataRateInSimilarPersent,
    DataRateInSimilarType,
    DataGrandTotal,
    FundInfoItem,
    FundManager,
    EstimatedMap,
    Position,
    // NavMap,
    NavTable,
    DataNetWorthTrend,
    DataACWorthTrend
  },
  data() {
    return {
      dataNetWorthTrend: [],
      dataAcWorthTrend: [],
      activeTab: 'dataNetWorthTrendData',
      activeTab1: 'dataGrandTotal',
      activeTab2: 'dataRateInSimilarType',
      activeTab3: 'dataFluctuationScale',
      NetAndAcWorthTrend: [],
      dataACAndNetWorth: {}
    }
  },
  computed: {
    // 获取路由中的参数 codeNumber 基金代码
    codeNumber() {
      return this.$route.params.codeNumber
    }

  },
  watch: {},
  created() {
    // this.$store.dispatch('QueryDataNetWorthTrendData', this.codeNumber)
  },
  mounted() {
    // this.getDataACAndNetWorth()
  },
  methods: {
    getDataNetWorthTrendData(dataNetWorthTrend) {
      this.dataNetWorthTrend = dataNetWorthTrend
    },
    getDataAcWorthTrendData(dataAcWorthTrend) {
      this.dataAcWorthTrend = dataAcWorthTrend
    },
    getDataACAndNetWorth() {
      queryDataACAndNetWorth(this.codeNumber).then(res => {
        console.log('queryDataACAndNetWorth', res)
        this.dataACAndNetWorth = res
      })
    },

    // 页签点击
    handleTabClick() {
      console.log()
      // this.$refs.dataAcWorthTrendDataRef.resizeChart()
    }

    // mergeNetAndAcData() {
    //   const res = []
    //   this.dataNetWorthTrend.forEach((val, index) => {
    //     const newRow = val.push.apply(val, this.dataNetWorthTrend[index])
    //     res.push({ date: newRow[0], net: newRow[1], ac: newRow[3] })
    //   })
    //   console.log(res)
    //   this.NetAndAcWorthTrend = res
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #5582F3;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

.el-main {
  z-index: 999;
  background: #f1f1f2 !important;
  //background-color: #E9EEF3;
  color: #333;
  text-align: center;
  //line-height: 160px;
  padding-top: 10px;

  // 全局字体
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;

}

.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}

.fund-title {
  color: #333333;
  font-size: 18px;
  font-weight: bold;
}
</style>
